<template>
  <!-- 工单统计 -->
  <div class="box home-user-task-stats bgc1">
    <div class="header">
      <div class="title">工单统计
        <span class="sub-title">{{ monthStart }} ~ {{ monthEnd }}</span>
      </div>
    </div>
    <div class="body">
      <div v-for="(item,index) in taskList" :key="index" class="stats">
        <div class="item">
          <div class="num color1 text-shadow1">{{ item.count }}</div>
          <div class="text color2">{{ item.text }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getTaskSummaryInfoAPI } from '@/api/user'
import { monthStart, monthEnd, monthDetailStart, monthDetailEnd } from '@/utils/dayjs'
export default {
  name: '',
  components: {},
  props: {},
  data() {
    return {
      task: {
        total: 0, // 总数
        completedTotal: 0, // 完成数
        cancelTotal: 0, // 拒绝数
        progressTotal: 0 // 进行数
      },
      monthStart,
      monthEnd
    }
  },
  computed: {
    taskList() {
      return [
        { text: '工单总数（个）', count: this.task.total },
        { text: '完成工单（个）', count: this.task.completedTotal },
        { text: '进行工单（个）', count: this.task.progressTotal },
        { text: '取消工单（个）', count: this.task.cancelTotal }
      ]
    }
  },
  watch: {},
  created() {
    this.taskSummaryInfo()
  },
  methods: {
    async taskSummaryInfo() {
      const { data } = await getTaskSummaryInfoAPI(monthDetailStart, monthDetailEnd)
      this.task.total = data.reduce((sum, item) => sum + item.total, 0)
      this.task.completedTotal = data.reduce((sum, item) => sum + item.completedTotal, 0)
      this.task.cancelTotal = data.reduce((sum, item) => sum + item.cancelTotal, 0)
      this.task.progressTotal = data.reduce((sum, item) => sum + item.progressTotal, 0)
    }
  }
}
</script>
<style scoped lang='scss'>
@import "~@/styles/home.scss";
</style>
